<template>
    <div>
        <Modal v-model="modal" class="modal-full modal-tester modal-center" :title="actionTitle" :width="modalWidth">
            <div v-if="modalShow">
                <div>数据集</div>
                <Selector></Selector>
                <div v-if="isReturn || 1">
                    <h4>请求数据</h4>
                    <Input type="textarea" :autosize="{minRows: 2,maxRows: 12}" :value="reqData"></Input>
                    <h4>返回数据</h4>
                    <Input type="textarea" :autosize="{minRows: 2,maxRows: 12}" :value="resData"></Input>
                </div>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="actionSubmit" type="primary">确认</i-button>
            </div>
        </Modal>
    </div>
</template> 

<script>
import ModalBase from '../modalBase'
import Selector from '@/components/selector'
import $ from '@/common'

export default {
    extends: ModalBase,
    props: {
    },
    data() {
        return {
            isReturn: false,
            reqData: null,
            resData: null
        }
    },
    computed: {
        actionTitle() {
            return this.isReturn ? 'API测试 返回数据' : 'API测试'
        },
        modalWidth() {
            return this.isReturn ? 600 : 600
        }
    },
    created() { },
    methods: {
        load() {
            this.isReturn = false
        },
        actionSubmit() {
            $.link().then(() => {
                this.isReturn = true
            })
        }
    },
    components: {
        Selector
    }
}
</script>

<style lang="less">
.modal-tester .ivu-modal {
    transition: height 0.3s;
}
</style>
